<template>
	<!-- 弹出层 -->
	<div style="z-index: 9999; overflow: hidden;" v-if="status">
		<!-- 蒙版 -->
		<view class="position-fixed top-0 left-0 right-0 bottom-0 z-index" 
		v-if="mask" :style="getMaskColor" @click="hide"></view>
		<!-- 弹出层内容 -->
		<div ref="popup" class="position-fixed free-animated z-index" :class="getBodyClass" :style="getBodyStyle">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	// #ifdef APP-PLUS-NVUE
	const animation = weex.requireModule('animation') //引入特效索引
	// #endif
	export default{
		data(){
			return{
				status: false,
				x: -1,
				y: -1,
				maxX:0,
				maxY:0
			}
		},
		props: {
			// 是否开启蒙版颜色
			maskColor: {
				type: Boolean,
				default: false
			},
			// 是否开启蒙版
			mask:{
				type: Boolean,
				default: true
			},
			// 是否居中
			center:{
				type: Boolean,
				default: false
			},
			// 是否处于底部
			bottom: {
				type: Boolean,
				default: false
			},
			// 弹出层内容宽度
			bodyW:{
				type: Number,
				default: 0
			},
			// 弹出层内容高度
			bodyH:{
				type: Number,
				default: 0
			},
			bodyBgColor:{
				type: String,
				default: "bg-white"
			},
			transformOrigin:{
				type: String,
				default: 'left top'
			},
			// tabbar高度
			tabbarHeight:{
				type:Number,
				default: 0
			}
			
		},
		mounted() {
			// 获取屏幕的最大宽度 高度 减去内容的宽度 高度
			try{
				const res = uni.getSystemInfoSync();
				this.maxX = res.windowWidth - uni.upx2px(this.bodyW)
				this.maxY = res.windowHeight - uni.upx2px(this.bodyH) -uni.upx2px(this.tabbarHeight)
			}catch(e){
				//TODO handle the exception
			}
		},
		computed:{
			getMaskColor(){
				let i = this.maskColor ? 0.5 : 0
				return `background-color: rgba(0, 0, 0, ${i});`
			},
			// 是否处于底部
			getBodyClass(){
				if(this.center){
					return 'left-0 right-0 bottom-0 top-0 flex align-center justify-center'
				}
				
				let fixedBootom = this.bottom ? 'left-0 right-0 bottom-0': 'rounded border'
				return `${this.bodyBgColor} ${fixedBootom}`
			},
			// 弹出的位置
			getBodyStyle(){
				let left = this.x > -1 ? `left:${this.x}px;` : ''
				let top = this.y > -1 ? `top:${this.y}px;` : ''
				return left + top
			}
		},
		methods:{
			show(x = -1, y = -1){
				this.x = (x > this.maxX )? this.maxX : x
				this.y = (y > this.maxY) ? this.maxY : y
				this.status = true
				
				// 弹出的动画特效
				// #ifdef APP-PLUS-NVUE
				this.$nextTick(()=>{
					animation.transition(this.$refs.popup, {
					    styles: {
					        transform: 'scale(1,1)',
							transformOrigin: this.transformOrigin, //缩放的位置
							opacity: 1
					    },
					    duration: 300, //ms
					    timingFunction: 'ease',
					    }, function () {
					})
				})
				// #endif
			},
			hide(){
				// 隐藏的时候触发
				this.$emit('hide')
				// #ifdef APP-PLUS-NVUE
				animation.transition(this.$refs.popup, {
				    styles: {
				        transform: 'scale(0,0)',
						transformOrigin: this.transformOrigin, //缩放的位置
						opacity: 0
				    },
				    duration: 300, //ms
				    timingFunction: 'ease',
				    }, () => {
						this.status = false;
				})
				// #endif
				// #ifndef APP-PLUS-NVUE
				this.status = false;
				// #endif
			}
		}
	}
</script>

<style scoped>
	/* 弹窗动画 */
	.free-animated{
		/* #ifdef APP-PLUS-NVUE */
		transform: scale(0,0);
		opacity: 0;
		/* #endif */
	}
	.z-index{
		/* #ifndef APP-PLUS-NVUE */
		z-index: 9999;
		/* #endif */
	}
</style>